<template>
    <el-container style="height: 100vh;">
      <el-aside width="200px" style="background-color: #304156">
        <!-- default-openeds属性指默认打开的栏目 -->
        <el-menu :default-openeds="[]">
          <el-submenu index="1" class="navigation">
            <template slot="title"
              ><i class="el-icon-message"></i>Student</template
            >
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="index1">Score Inquiry</el-menu-item>
            </el-menu-item-group>

            <el-menu-item-group>
              <el-menu-item index="1-2" @click="index2">Information Changes</el-menu-item>
            </el-menu-item-group>

          </el-submenu>
  
        </el-menu>


      </el-aside>
      <el-container>
        <el-header
          style="text-align: right; font-size: 12px;height: auto; margin-top: 5px;"
        >
          <!-- 抽屉弹框 -->
          <el-row :gutter="15">
           <!--  弹出框样式
            <el-drawer
              :visible.sync="drawer"
              :direction="direction"
              size="15%"
              :withHeader="false"
              :modal="false"
            >
              <el-aside
                width="100%"
                height="100%"
                style="background-color: #304156;"
              >
                default-openeds属性指默认打开的栏目
                <el-menu :default-openeds="['1', '2', '3']">
                  <el-submenu index="1" class="navigation">
                    <template slot="title"
                      ><i class="el-icon-user"></i>My Subjects1</template
                    >
                    <el-menu-item-group>
                      <el-menu-item index="1-1">class 1</el-menu-item>
                      <el-menu-item index="1-2">class 2</el-menu-item>
                      <el-menu-item index="1-3">class 3</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="2" class="navigation">
                    <template slot="title"
                      ><i class="el-icon-help"></i>My Subject2</template
                    >
                    <el-menu-item-group>
                      <el-menu-item index="2-1">class 1</el-menu-item>
                      <el-menu-item index="2-2">class 2</el-menu-item>
                      <el-menu-item index="2-3">class 3</el-menu-item>
                      <el-menu-item index="2-4">class 4</el-menu-item>
                      <el-menu-item index="2-5">class 5</el-menu-item>
                      <el-menu-item index="2-6">class 6</el-menu-item>
                      <el-menu-item index="2-7">class 7</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </el-aside>
            </el-drawer>
            -->
            <!-- 
            <el-col :xs="6" :sm="6" :md="4" :lg="3" :xl="1"
              ><div
                class="grid-content"
                style="text-align: left"
                @click="drawer = true"
                type="primary"
              >
                <i class="el-icon-menu marginTop"></i></div
            ></el-col>
             -->
             
             <!-- 
            <el-col :xs="10" :sm="10" :md="8" :lg="18" :xl="19"
              ><div class="grid-content ">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item :to="{ path: '/' }"
                    >首页</el-breadcrumb-item
                  >
                  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
              </div></el-col
            >
             -->
            
              <div class="grid-content" style="float: right; margin-right: 50px;">
                <div class="demo-type">
                  <div>
                    <el-avatar
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    ></el-avatar>
                  </div>
                </div>
  
                <el-dropdown :hide-on-click="false">
                  <i class="el-icon-setting" style="margin-right: 15px"></i>
                  <el-dropdown-menu slot="dropdown" :hide-after="0">
                    <el-tooltip
                      placement="top"
                      style="border: none;0"
                      :hide-after="0"
                    >
                      <div slot="content">python课程设计<br />数据库概论</div>
                      <el-button>我的科目</el-button>
                    </el-tooltip>
                    <!-- <el-dropdown-item>我的班级</el-dropdown-item> -->
                    <el-dropdown-item>
                      <el-popconfirm title="确认退出登录？">
                        <el-button slot="reference" style="border: none;"
                          >退出</el-button
                        >
                      </el-popconfirm>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
          </el-row>
          
        </el-header>
        <!--        主要内容部分-->
        <el-main style="max-height: 820px;">
          <!-- 页面tab栏 -->
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="Statistics" name="first"> </el-tab-pane>
            <el-tab-pane label="Enter" name="second"> </el-tab-pane>
            <el-tab-pane label="Modify" name="third">
              <el-table
                style="width: 100%"
                :data="CourseData"
                :border="true"
                height="480"
                :row-class-name="tableRowClassName"
              >
                <el-table-column label="cno" align="center">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.cno }}</span>
                    <el-input v-show="row.edit" v-model="row.cno"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="name" prop="name">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.name }}</span>
                    <el-input v-show="row.edit" v-model="row.name"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="type" prop="type">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.type }}</span>
                    <el-input v-show="row.edit" v-model="row.type"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="credit" prop="credit">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.credit }}</span>
                    <el-input v-show="row.edit" v-model="row.credit"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                  <template slot-scope="{ row }">
                    <div style="display: flex;justify-content: space-around ">
                      <el-button
                        size="mini"
                        @click="row.edit = !row.edit"
                        type="primary"
                        plain
                        >Edit</el-button
                      >
                      <el-dropdown-item>
                        <el-popconfirm title="确认删除？" style="display: flex;">
                          <el-button
                            slot="reference"
                            size="mini"
                            type="danger"
                            plain
                            @click="handleDelete(row.$index, row.row)"
                            >Delete</el-button
                          >
                        </el-popconfirm>
                      </el-dropdown-item>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">调整每页显示条数</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage2"
                  :page-sizes="[20, 50, 100, 150]"
                  :page-size="20"
                  layout="sizes, prev, pager, next"
                  :total="1000"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="Score Entry" name="fourth"></el-tab-pane>
            <el-tab-pane label="Student Modify" name="fifth">
              <!-- 按钮部分 -->
              <div style="display: flex;">
                <!-- 最高低分按钮显示样式 -->
                <div style="margin-right: 30px;">
                  <el-button @click="show3 = !show3" style="margin-bottom: 10px;"
                    >Limit points</el-button
                  >
                  <el-collapse-transition>
                    <div v-show="show3">
                      <div class="transition-box">highest：</div>
                      <div class="transition-box">minimum：</div>
                    </div>
                  </el-collapse-transition>
                </div>
                <!-- 平均分按钮显示样式 -->
                <div>
                  <el-button @click="show1 = !show1" style="margin-bottom: 10px;"
                    >Average score</el-button
                  >
                  <el-collapse-transition>
                    <div v-show="show1">
                      <div class="transition-box">average：</div>
                    </div>
                  </el-collapse-transition>
                </div>
                <!-- 不及格人数按钮样式 -->
                <div style="margin-left: 30px;">
                  <el-button @click="show2 = !show2" style="margin-bottom: 10px;"
                    >Failing Grades</el-button
                  >
                  <el-collapse-transition>
                    <div v-show="show2">
                      <div class="transition-box">numbers：</div>
                    </div>
                  </el-collapse-transition>
                </div>
              </div>
  
              <!-- 表格部分-- -->
              <el-table
                id="SubjectTable"
                style="width: 100%;padding: 0; "
                :data="tableData"
                :border="true"
                height="440"
                :row-class-name="tableRowClassName"
              >
                <el-table-column label="sno" prop="sno">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.sno }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.sno"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="name" prop="name">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.name }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.name"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="sex" prop="sex">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.sex }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.sex"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="date" prop="date">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.date }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.date"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="sdept" prop="sdept">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.sdept }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.sdept"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="science" prop="science">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.science }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.science"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="class" prop="class">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.class }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.class"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                  <template slot-scope="{ row }">
                    <div style="display: flex;justify-content: space-around ">
                      <el-button
                        size="mini"
                        @click="row.edit = !row.edit"
                        type="primary"
                        plain
                        >Edit</el-button
                      >
                      <el-dropdown-item style="padding: 0;margin: 0;">
                        <el-popconfirm
                          title="确认删除？"
                          style="padding: 0; margin: 0;"
                        >
                          <el-button
                            slot="reference"
                            size="mini"
                            type="danger"
                            plain
                            >Delete</el-button
                          >
                        </el-popconfirm>
                      </el-dropdown-item>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 页脚部分 -->
              <div class="block">
                <!-- <span class="demonstration">调整每页显示条数</span> -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage2"
                  :page-sizes="[20, 50, 100, 150]"
                  :page-size="20"
                  layout="sizes, prev, pager, next"
                  :total="1000"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="Enter Student" name="sixth"></el-tab-pane>
          </el-tabs>
          <!-- 手写top标签栏与左边栏联动 -->
          <!-- <div class="tab">
            <div class="content">
              6个按钮
              <button
                :class="index == number ? 'btn1' : 'btn'"
                @click="tab(index)"
                v-for="(item, index) in dataList"
                :key="index"
              >
                {{ item.option }}
              </button>
            </div>
            6个div
            <div id="content1" v-show="number == 0">
              1
            </div>
            <div id="content2" v-show="number == 1">
              <el-table
                style="width: 100%"
                :data="CourseData"
                :border="true"
                height="480"
                :row-class-name="tableRowClassName"
              >
                <el-table-column label="cno" align="center">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.cno }}</span>
                    <el-input v-show="row.edit" v-model="row.cno"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="name" prop="name">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.name }}</span>
                    <el-input v-show="row.edit" v-model="row.name"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="type" prop="type">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.type }}</span>
                    <el-input v-show="row.edit" v-model="row.type"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="credit" prop="credit">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.credit }}</span>
                    <el-input v-show="row.edit" v-model="row.credit"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                  <template slot-scope="{ row }">
                    <div style="display: flex;justify-content: space-around ">
                      <el-button
                        size="mini"
                        @click="row.edit = !row.edit"
                        type="primary"
                        plain
                        >Edit</el-button
                      >
                      <el-dropdown-item>
                        <el-popconfirm title="确认删除？" style="display: flex;">
                          <el-button
                            slot="reference"
                            size="mini"
                            type="danger"
                            plain
                            @click="handleDelete(row.$index, row.row)"
                            >Delete</el-button
                          >
                        </el-popconfirm>
                      </el-dropdown-item>
                      
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">调整每页显示条数</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage2"
                  :page-sizes="[20, 50, 100, 150]"
                  :page-size="20"
                  layout="sizes, prev, pager, next"
                  :total="1000"
                >
                </el-pagination>
              </div>
            </div>
            <div id="content3" v-show="number == 2">
              3
            </div>
            <div id="content4" v-show="number == 3">
              4
            </div>
            <div id="content5" v-show="number == 4">
              5
            </div>
            <div id="content6" v-show="number == 5">
              按钮部分
              <div style="display: flex;">
                最高低分按钮显示样式
                <div style="margin-right: 30px;">
                  <el-button @click="show3 = !show3" style="margin-bottom: 10px;"
                    >Limit points</el-button
                  >
                  <el-collapse-transition>
                    <div v-show="show3">
                      <div class="transition-box">highest：</div>
                      <div class="transition-box">minimum：</div>
                    </div>
                  </el-collapse-transition>
                </div>
                平均分按钮显示样式
                <div>
                  <el-button @click="show1 = !show1" style="margin-bottom: 10px;"
                    >Average score</el-button
                  >
                  <el-collapse-transition>
                    <div v-show="show1">
                      <div class="transition-box">average：</div>
                    </div>
                  </el-collapse-transition>
                </div>
                不及格人数按钮样式
                <div style="margin-left: 30px;">
                  <el-button @click="show2 = !show2" style="margin-bottom: 10px;"
                    >Failing Grades</el-button
                  >
                  <el-collapse-transition>
                    <div v-show="show2">
                      <div class="transition-box">numbers：</div>
                    </div>
                  </el-collapse-transition>
                </div>
              </div>
  
              表格部分--
              <el-table
                id="SubjectTable"
                style="width: 100%;padding: 0; "
                :data="tableData"
                :border="true"
                height="440"
                :row-class-name="tableRowClassName"
              >
                <el-table-column label="sno" prop="sno">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.sno }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.sno"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="name" prop="name">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.name }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.name"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="sex" prop="sex">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.sex }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.sex"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="date" prop="date">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.date }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.date"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="sdept" prop="sdept">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.sdept }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.sdept"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="science" prop="science">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.science }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.science"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="class" prop="class">
                  <template slot-scope="{ row }">
                    <span v-show="!row.edit">{{ row.class }}</span>
                    <el-input
                      autosize
                      v-show="row.edit"
                      v-model="row.class"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"
                    />
                  </template>
                  <template slot-scope="{ row }">
                    <div style="display: flex;justify-content: space-around ">
                      <el-button
                        size="mini"
                        @click="row.edit = !row.edit"
                        type="primary"
                        plain
                        >Edit</el-button
                      >
                      <el-dropdown-item style="padding: 0;margin: 0;">
                        <el-popconfirm
                          title="确认删除？"
                          style="padding: 0; margin: 0;"
                        >
                          <el-button
                            slot="reference"
                            size="mini"
                            type="danger"
                            plain
                            >Delete</el-button
                          >
                        </el-popconfirm>
                      </el-dropdown-item>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              页脚部分
              <div class="block">
                <span class="demonstration">调整每页显示条数</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage2"
                  :page-sizes="[20, 50, 100, 150]"
                  :page-size="20"
                  layout="sizes, prev, pager, next"
                  :total="1000"
                >
                </el-pagination>
              </div>
            </div>
          </div> -->
        </el-main>
        <el-footer> </el-footer>
      </el-container>
    </el-container>
  </template>
  <script>
  export default {
    name: "Home",
    data() {
      return {
        dianji: 0,
        number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
        dataList: [
          { option: "Statistics" },
          { option: "Enter" },
          { option: "Modify" },
          { option: "Score Entry" },
          { option: "Student Modify" },
          { option: "Enter Student" }
        ],
  
        activeName: "first",
        // 抽屉打开参数
        drawer: false,
        direction: "rtl",
        // 按钮打开参数
        show3: false,
        show2: false,
        show1: false,
        search: "",
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
  
        editableTabsValue: "2",
        editableTabs: [
          {
            title: "Tab 1",
            name: "1",
            content: "Tab 1 content"
          },
          {
            title: "Tab 2",
            name: "2",
            content: "Tab 2 content"
          }
        ],
        tabIndex: 2,
        CourseData: [
          {
            name: "数据库概论",
            cno: "001",
            credit: 2,
            type: "计算机科学与技术",
            edit: false
          },
          {
            name: "os操作系统",
            cno: "002",
            credit: 1,
            type: "计算机科学与技术",
            edit: false
          },
          {
            name: "概率论",
            cno: "003",
            credit: 1.5,
            type: "大数据",
            edit: false
          },
          {
            name: "马克思主义概论",
            cno: "004",
            credit: 2.5,
            type: "马克思院",
            edit: false
          },
          {
            name: "线性代数",
            cno: "005",
            credit: 1.5,
            type: "计算机科学与技术",
            edit: false
          }
        ],
        tableData: [
          {
            date: "2021-05-02",
            name: "王小虎",
            sno: "2021081224",
            sex: "男",
            sdept: "计算机工程学院",
            class: "计科212",
            science: "计算机科学与技术",
            edit: false
          },
          {
            date: "2021-05-05",
            name: "王小帅",
            sno: "2021081225",
            sex: "男",
            sdept: "计算机工程学院",
            class: "计科212",
            science: "人工智能",
            edit: false
          },
          {
            date: "2021-08-02",
            name: "王小美",
            sno: "2021081214",
            sex: "女",
            sdept: "计算机工程学院",
            class: "计科211",
            science: "计算机科学与技术",
            edit: false
          },
          {
            date: "2021-25-02",
            name: "王小吖",
            sno: "2021081204",
            sex: "男",
            sdept: "计算机工程学院",
            class: "计科212",
            science: "计算机科学与技术",
            edit: false
          },
          {
            date: "2021-05-02",
            name: "王小",
            sno: "2021081224",
            sex: "男",
            sdept: "计算机工程学院",
            class: "计科211",
            science: "计算机科学与技术",
            edit: false
          }
        ]
      };
    },
  
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      tableRowClassName({ row, rowIndex }) {
        //   if (rowIndex === 1) {
        //     return "warning-row";
        //   } else if (rowIndex === 3) {
        //     return "success-row";
        //   }
        return "common-row";
      },
      // 页数显示方法
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
  
      //
      //定义切换方法
      tab(index) {
        this.number = index;
        console.log(index, this.number);
      },
  
      index1() {
        this.number = 0;
        this.activeName = "first";
      },
      index2() {
        this.number = 1;
        this.activeName = "second";
      },
      index3() {
        this.activeName = "third";
        this.number = 2;
      },
      index4() {
        this.activeName = "fourth";
        this.number = 3;
      },
      index5() {
        this.activeName = "fifth";
        this.number = 4;
      },
      index6() {
        this.activeName = "sixth";
        this.number = 5;
      }
    }
  };
  </script>
  
  <style>
  .el-table {
    .el-button {
      width: 56px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .common-row {
    /* height: 30px; */
    padding: 0;
    font-size: smaller;
    /* background-color: #7191b7; */
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  /* 抽屉背景样式 */
  .el-drawer ltr {
    background-color: #304156;
  }
  .el-row.el-menu {
    display: flex;
    background-color: #304156;
    /* max-width: 100px; */
  }
  .el-row.el-drawer__header,
  .el-drawer__body {
    background-color: #304156;
  }
  el-aside,
  .el-row.el-drawer__body {
    background-color: #304156;
    border: none;
    max-width: 100px;
  }
  .el-row.el-submenu__title {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  /* 最高低分按钮显示样式 */
  .transition-box {
    margin-bottom: 10px;
    width: 150px;
    height: 50px;
    border-radius: 4px;
    background-color: #2b5c99;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-family: "PMZD"; */
  
    /* padding: 30px 10px; */
    box-sizing: border-box;
    margin-right: 20px;
  }
  /* 页数显示样式 */
  .block {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .marginTop {
    margin-top: 20px;
  }
  .el-aside {
    padding-top: 140px;
    border: none;
  }
  .el-menu-item-group {
    background-color: #2d3a4b;
  }
  .navigation:hover {
    background-color: #7191b7;
  }
  .navigation {
    background-color: #304156;
  }
  .el-submenu .el-menu-item {
    color: #fff;
    font-family: "PMZD";
  }
  .el-submenu__title {
    color: #fff;
    font-family: "PMZD";
  }
  
  /* 布局demo  顶部栏 */
  .grid-content {
    font-size: 30px;
    border-radius: 5px;
    min-height: 50px;
    display: flex;
    align-items: end;
  }
  
  /* tarbar样式 */
  .tab {
    /* display: flex; */
  }
  .content {
    display: flex;
    /* width: 1000px; */
    /* display: inline; */
    border-bottom: 0.5px solid #e4e7ed;
    /* background-color: #409eff; */
  }
  .btn {
    width: 150px;
    height: 40px;
    border: 0;
    color: #909399;
    padding: 0;
    /* margin: 20px 0px; */
    background-color: #fff;
    border-top: #e4e7ed 1px solid;
    border-left: #e4e7ed 1px solid;
    border-right: #e4e7ed 1px solid;
    border-bottom: #e4e7ed 0.5px solid;
  }
  
  /*选中时*/
  .btn1 {
    width: 150px;
    height: 40px;
    border: none;
    /* border: #e4e7ed 1px solid; */
    border-top: #e4e7ed 1px solid;
    border-left: #e4e7ed 1px solid;
    border-right: #e4e7ed 1px solid;
  
    /* border-bottom: 10px solid #df4747; */
    /* color: rgb(17, 17, 17); */
    color: #409eff;
    /* margin: 20px 0px; */
    background-color: #fff;
    padding: 0;
  }
  
  #content1,
  #content2,
  #content3,
  #content4,
  #content5,
  #content6 {
    /* background-color: #fff;
    height: 660px;
    font-size: 16px;
    line-height: 40px; */
    margin-top: 20px;
  }
  </style>
  